<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module">
        import '../../build/ref-lit.js';

        const {defineComponent, html} = window.$ref_lit;

        defineComponent('custom-input',
            {
                value: '',
                type: 'text',
                placeholder: 'please input...'
            },
            ({props, component}) => {

                function onInputChanged(e) {
                    component.dispatchEvent(new CustomEvent('cvalue', {
                        detail: {value: e.target.value}
                    }));
                }

                return () => html`
                    <input value=${props.value} type=${props.type} placeholder=${props.placeholder} @keyup=${onInputChanged} >
                `
            }
        );

        defineComponent('my-component', {}, ({ref}) => {

            function onValueChanged(e) {
                ref.value = e.detail.value;
            }

            return () => html`
                <div>
                    <p>${ref.value}</p>
                    <custom-input value=${ref.value} @cvalue=${onValueChanged}></custom-input>
                </div>
            `
        });

    </script>
</head>
<body>
<div id="box">
    <my-component></my-component>
</div>
</body>
</html>